<template>
  <div class="proc-node-layout">
    <template v-if="props.nodes != null">
      <el-timeline style="width: 100%">
        <el-timeline-item v-for="(node, index) in props.nodes" :key="index">
          <div class="node">
            <div class="left">
              <div class="title">{{node.nodeName}}</div>
              <div class="describe">{{node.describe}}</div>
            </div>
            <div class="right">
              <div class="handler" v-for="(header, index) in node.handlerList" :key="index">
<!--                <img class="avatar" src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />-->
                <img class="avatar" :src="userImg" />
                <div class="name">{{header.name}}</div>
                <div class="del" v-if="header.deletable" @click="delHandler(node.handlerList, header)">x</div>
              </div>
              <div class="add-handler" v-if="node.handlerScope === 4 && node.handlerList.length <= 20" @click="showAddHandler(node.handlerList)">+</div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </template>
    <template v-else>
      必填信息填写后，流程将自动显示
    </template>
    <OrgSelect ref="userSelect" :multipleSize="1" @ok="userSelectOk"/>
  </div>

</template>

<script setup>
import OrgSelect from "@/components/OrgSelect/index.vue";
import userImg from "@/assets/images/profile.png"
import {START, APPROVER, NOTIFY} from "@/components/EasyProcess/config/nodeType"
import {computed, getCurrentInstance, onMounted, ref} from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  nodes: {
    type: Array,
  }
});

let nowHandlerList = []

watch(
    () => props.nodes,
    (val) => {
      handleNodes()
    }
);

onMounted(async () => {
  handleNodes()
});

function showAddHandler(handlerList) {
  nowHandlerList = handlerList
  proxy.$refs.userSelect.show();
}
function userSelectOk(data) {
  if (data && data.length > 0) {
    let user = data[0]
    let exist = false
    nowHandlerList.forEach(item => {
      if (item.userId === user.id) {
        exist = true
      }
    })
    if (!exist) {
      let o = {
        userId: user.id,
        name: user.label,
        deletable: true
      }
      nowHandlerList.push(o)
      handleNodes()
    }

  }
}
function delHandler(handlerList, handler) {
  handlerList.splice(handlerList.indexOf(handler), 1)
  handleNodes()
}

function handleNodes() {
  if (props.nodes != null) {
    props.nodes.forEach(node => {
      node.describe = generateDescribe(node)
    })
  }

}

function generateDescribe(node) {

  let handlerNum = 0
  if (node.handlerList) {
    handlerNum = node.handlerList.length
  }

  if (node.nodeType === START) {
    return ""
  }

  if (node.nodeType === NOTIFY) {
    return "抄送" + handlerNum + "人"
  }

  if (node.nodeType === APPROVER) {
    if (node.handlerScope === 1 || node.handlerScope === 4) {
      if (node.handleModel === 1) {
        return handlerNum + "人依次审批"
      } else if (node.handleModel === 2) {
        return handlerNum + "人会签"
      } else if (node.handleModel === 3) {
        return handlerNum + "人或签"
      }
      return handlerNum + "人审批"
    } else if (node.handlerScope === 2) {
      return "部门主管审批"
    } else if (node.handlerScope === 3) {
      return "多级部门主管审批"
    }
  }

  return ""
}
</script>

<style scoped lang="scss">
.proc-node-layout {
  width: 100%;
  .node {
    display: flex;
    flex-direction: row;
    .left {
      flex: 1;

      .title {
        font-size: 16px;
        font-weight: bold;
        color: #5a5e66;
      }
      .describe {
        margin-top: 10px;
        font-size: 14px;
        color: #707070;
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      .handler {
        position: relative;
        margin: 0 10px 10px 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        //width: 60px;
        //height: 80px;
        .avatar {
          width: 40px;
          height: 40px;
          border: 1px solid #cccccc;
          border-radius: 8px;
        }
        .name {
          color: #707070;
        }
        .del {
          position: absolute;
          top: -5px;
          right: -5px;
          width: 16px;
          height: 16px;
          border-radius: 16px;
          text-align: center;
          line-height: 16px;
          background-color: #cccccc;
          color: #FFFFFF;
          font-size: 12px;
          cursor: pointer;
        }
      }
      .add-handler {
        margin: 0 10px 10px 10px;
        width: 40px;
        height: 40px;
        border: 1px solid #cccccc;
        border-radius: 8px;
        text-align: center;
        line-height: 40px;
        font-size: 30px;
        color: #cccccc;
        cursor: pointer;
      }
    }
  }

}
</style>